<template>
  <view>
    <view
      class="table-template"
      v-if="contentText"
      @click="clickPreview"
    >{{ contentText }}</view>
    <view
      class="default-button"
      v-if="btnText"
      @click="clickPreview"
    >{{ btnText }}</view>
    <you-popup
      :popupVisible="previewDialog"
      :popupTitle="dialogTitle"
      :showBtn="false"
	    @popupClose="previewDialog = false"
    >
      <template #popupContent>
        <scroll-view scroll-y class="dialog-content">
          <view v-if="isLoading" class="common-loading">
            <image class="loading-img" :src="baseIconUrl + '/commonIcon/icon_loading.png'" />
            正在解析文件，请稍后......
          </view>
          <view v-else-if="!textContent" class="common-no-data">
            <image class="no-data-img" :src="baseIconUrl + '/commonIcon/icon_no_data.png'" />
            <view class="text">附件无内容</view>
          </view>
          <view v-else v-for="(item, index) in decodedLines" :key="index" class="song-item">
            {{ item }}
          </view>
        </scroll-view>
      </template>
    </you-popup>
  </view>
</template>

<script>
  import api_system from '@/api/system'
  import YouPopup from '../you-popup/index.vue'
  import { baseIconUrl } from '@/config'
  export default {
    name: 'YouFilePreview',
    components: { YouPopup },
    data() {
      return {
        baseIconUrl,
        isLoading: false,
        textContent: '',
        decodedLines: [],
        previewDialog: false
      }
    },
    props: {
      url: {
        type: String,
        default: ''
      },
      contentText: {
        type: String,
        default: ''
      },
      btnText: {
        type: String,
        default: ''
      },
      dialogTitle: {
        type: String,
        default: '文件预览'
      }
    },
    created() {},
    methods: {
      clickPreview() {
        this.previewDialog = true
        this.preview(this.url)
      },
      preview(url) {
        this.isLoading = true
        api_system.fetchWordContent({ fileName: url }).then(res => {
          this.isLoading = false
          const textContent = res.data
          this.textContent = textContent
          if (!textContent || textContent === '') return this.decodedLines = []
          this.decodedLines = textContent.split('\n')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .default-button {
    width: 102px;
    height: 30px;
    margin: 25px 20px 0;
    border: 1px solid #115BAA;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 400;
    color: #115BAA;
    background: #ffe8ed;
  }
  .dialog-content {
    height: 60vh;
  }
</style>